
<html>
	<head>
		<title>Demo of DataGrid</title>
		<link href="../src/css/dgrid.css" rel="stylesheet" type="text/css" />
		<link href="../src/css/scrollbar.css" rel="stylesheet" type="text/css" />
		<style>
			#TEST_GRID {
				width:640px;
				height:480px;
				border:#333 solid 2px;
			}
		</style>
		<script src="../src/js/base/g.js"> </script> 
		<script src="../src/js/utils/list.js"> </script> 
		<script src="../src/js/base/dom.js"> </script> 
		<script src="../src/js/widget/scrollbar.js"> </script> 
		<script src="../src/js/widget/datasource.js"></script>
		<script src="../src/js/widget/dgrid.js"></script>
		<script>
			function demo_init() 
			{
				var dgrid = G('TEST_GRID').DataGrid([
					{type: 'select', width: 40},
					{type: 'index', name: 'index', width: 60},
					{type: 'data', name: 'COL-01', width:200, key: "key1"},
					{type: 'data', name: 'COL-02', width:200, key: "key2"},
					{type: 'data', name: 'COL-03', width:200, key: "key3"}
				]);
				var testArray = [];
				for (var i = 0; i < 200; i++) {
					testArray[i] = { key1: i, key2: i + "-1", key3: i + "-2"};
				}
				var ds = new G.Widget.DataSourceArray(testArray);
				dgrid.link_data(ds);
				dgrid.set_page_size(40);
			}
		</script>
	</head>
	<body onload="demo_init()">
		<div id="TEST_GRID"></div>
	</body>
</html>
